<template>
	<div>
		<!-- 模态框 -->
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
			<span>
				<el-input placeholder="请输入价格报警比例" v-model="fakePriceAlarmRatio" class="input-with-select">
					<span slot="prepend">价格报警比例</span>
					<template slot="append">%</template>
				</el-input>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updatePriceAlarmRatio()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 主题 -->
		<el-container>
			<el-main style="height: 60px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
				<el-row style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);line-height: 60px;background-color: #E9EEF3">
					<el-col :span="8">
						价格报警比例： {{priceAlarmRatio.toFixed(2)}}%
					</el-col>
					<el-col :span="4" :offset="12">
						<el-button type="success" size="small" @click="dialogVisible = true">修改</el-button>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'productGradeOfType',
		data() {
			return {
				/* 价格比例 */
				priceAlarmRatio: 70.00,
				/* 是否显示模态框 */
				dialogVisible: false,
				/* 修改文本框中的值 */
				fakePriceAlarmRatio: '',
			}
		},
		mounted: function() {
			/* 从数据库获取价格比例值 */
		},
		methods: {
			/* 修改价格报警比例 */
			updatePriceAlarmRatio() {
				this.dialogVisible = false;
			}
		},
	}
</script>

<style scoped>
	.el-header {
		background-color: #333333;
	}
</style>
